<script setup>
  import Toolbar from '@/components/Toolbar/Toolbar.vue'
  import {tableCheckChane} from "@/utils/index.js";
  const { proxy } = getCurrentInstance()
  const pagerConfig = ref({
    total: 0,
    currentPage: 1,
    pageSize: 10,
  })
  const ids = ref([])
  const tableData = ref([])
  const tableColumn = reactive([
    {
      type: 'checkbox',
      width: 50,
      align: 'center',
    },
    {
      title: '操作',
      align: 'center',
      field: 'action',
      slots: {
        default: 'actions',
      },
    },
  ])
  const searchConfig = reactive([])
  const queryParam = ref({})

  onMounted(() => {
      getList()
  })

  function getList(){

  }

  function handleAdd() {

  }

  function handleDelete(){

  }
  function handlePageChange({ currentPage, pageSize }) {
    pagerConfig.value.currentPage = currentPage
    pagerConfig.value.pageSize = pageSize
    getList()
  }

  function handleCheckChange(data) {
    ids.value = tableCheckChane(data, '{{uniqueId}}',ids.value)
  }

  function handleExport() {
    proxy.download('', {...queryParam.value, exportIds: ids.value.join(',') }, `_${new Date().getTime()}.xlsx`)
  }

  function handleSearch(params) {
      queryParam.value = params
      pagerConfig.value.currentPage = 1
      getList()
  }
</script>

<template>
  <div class="app-container">
    <el-card shadow="never" class="">
      <SearchBar :search-config="searchConfig" @search="handleSearch"/>
    </el-card>
    <el-card shadow="never" class="mt-2">
      <Toolbar>
        <el-button
            type="primary"
            class="el-gradient-primary"
            @click="handleAdd"
            v-hasPermi="['{{permission}}:add']"
        >
          新增
          <el-icon class="el-icon--right">
            <CirclePlusFilled />
          </el-icon>
        </el-button>
        <el-button
            type="danger"
            class="el-gradient-danger"
            :disabled="ids.length === 0"
            @click="handleDelete(null)"
            v-hasPermi="['{{permission}}:remove']"
        >
          删除
          <el-icon class="el-icon--right">
            <Delete />
          </el-icon>
        </el-button>
        <el-button
            type="warning"
            class="el-gradient-warning"
            @click="handleExport()"
            v-hasPermi="['{{permission}}:export']"
        >
          导出
          <el-icon class="el-icon--right">
            <FolderAdd />
          </el-icon>
        </el-button>
      </Toolbar>
      <vxe-grid
          :row-config="{
          keyField: '{{uniqueId}}',
        }"
          :data="tableData"
          :columns="tableColumn"
          :pager-config="pagerConfig"
          header-cell-class-name="headerCellClass"
          @page-change="handlePageChange"
          @checkbox-all="handleCheckChange"
          @checkbox-change="handleCheckChange"
      >
        <template #actions="{row}">
        </template>
      </vxe-grid>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>

</style>
